<template>
<div>
<h1>求职意向</h1>
  <div>
    <input v-model="key">
    <button @click="add">添加</button>
  </div>
  <div>
    <center>
    <table>
      <tr>
        <td>序号</td>
        <td>id</td>
        <td>name</td>
        <td>求职意向</td>
        <td>教育</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-bind:key="stu.id" v-for="stu in qlist" v-bind:class="stu.cls">
        <td>{{stu.ids}}</td>
        <td>{{stu.id}}</td>
        <td>{{stu.name}}</td>
        <td>{{stu.job.toString()}}</td>
        <td>{{stu.school}}</td>
        <td>{{stu.sex=="M"?"男":"女"}}</td>
        <td>
          <button @click="del(stu.id)">删除</button>
          <button @click="update(stu.id)">修改</button>
        </td>
      </tr>
    </table>
    </center>
  </div>
  <div v-show="show">
    <h3>简介管理</h3>
    姓名:<input type="text" v-model="stu.name"><br>
    求职意向:<label v-bind:key="o" v-for="o in jobs">
    <input type="checkbox" v-bind:value="o" v-model="stu.job">{{ o }}
  </label><br>
    教育经历:<select v-model="stu.school">
    <option value="">请选择</option>
    <option v-bind:key="e" v-for="e in schoolList" v-bind:value="e" v-bind:label="e"></option>
  </select><br>
    选择性别:<input type="radio" v-model="stu.sex" value="M">男
    <input type="radio" v-model="stu.sex" value="W">女
    <input type="radio" v-model="stu.sex">人妖<br>
    <button @click="save">保存修改</button>
    <button @click="show=false">取消修改</button>
  </div>
  <div v-show="showadd">
    <h3>简介管理</h3>
    简历名称:<input type="text"><br>
    姓名:<input type="text" v-model="stu.name"><br>
    求职意向:<label v-bind:key="o" v-for="o in jobs">
    <input type="checkbox" v-bind:value="o" v-model="stu.job">{{ o }}
  </label><br>
    生日:<input type="date"><br>
    教育经历:<select v-model="stu.school">
    <option value="">请选择</option>
    <option v-bind:key="e" v-for="e in schoolList" v-bind:value="e" v-bind:label="e"></option>
  </select><br>
    选择性别:<input type="radio" v-model="stu.sex" value="M">男
    <input type="radio" v-model="stu.sex" value="W">女
    <input type="radio" v-model="stu.sex">人妖<br>
    邮箱:<input type="text"><br>
    电话:<input type="text"><br>
    <button @click="saveadd">保存增加</button>
    <button @click="showadd=false">取消增加</button>
  </div>
</div>
</template>

<script>
export default {
  name: 'StuView',
  data: function () {
    return {
      // 初始值不显示
      show: false,
      showadd: false,
      schoolList: ['硕士', '本科生', '研究生'],
      jobs: ['管理员', '职员', '业务员', '程序员'],
      stu: {
        ids: 0,
        id: 0,
        cls: '',
        name: '',
        job: [],
        school: '',
        sex: ''
      },
      key: '',
      list: [
        {
          ids: 1,
          id: 1,
          cls: 'myClass',
          name: '张三三',
          job: '管理员',
          school: '研究生',
          sex: 'M'
        },
        {
          ids: 2,
          id: 2,
          cls: 'yourClass',
          name: '李思思',
          job: '职员',
          school: '本科生',
          sex: 'W'
        },
        {
          ids: 3,
          id: 3,
          cls: 'myClass',
          name: '王武武',
          job: '业务员',
          school: '研究生',
          sex: 'M'
        },
        {
          ids: 4,
          id: 4,
          cls: 'yourClass',
          name: '赵柳柳',
          job: '程序员',
          school: '硕士',
          sex: 'W'
        }
      ]
    }
  },
  // 计算 模糊查询(字段)
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property,vue/no-dupe-keys
    qlist () {
      return this.list.filter(x => { return x.name.includes(this.key) })
    }
  },
  methods: {
    del (id) {
      const pos = this.list.findIndex((x) => { return x.id === id })
      this.list.splice(pos, 1)
    },
    update (id) {
      alert(id)
      // 显示修改页面
      this.show = true
      // 深度复制
      // eslint-disable-next-line no-unused-vars
      this.stu = JSON.parse(JSON.stringify(this.list.find((x) => { return x.id === id })))
    },
    add () {
      this.showadd = true
      // eslint-disable-next-line no-unused-vars
      const lastId = this.list[this.list.length - 1].id
      this.stu = {
        ids: lastId + 1,
        id: lastId + 1,
        cls: '',
        name: '',
        job: [],
        school: '',
        sex: ''
      }
    },
    saveadd: function () {
      // eslint-disable-next-line no-unused-expressions
      this.list.push(this.stu)
      this.showadd = false
    },
    save: function () {
      const pos = this.list.find((x) => { return x.id === this.stu.id })
      // eslint-disable-next-line no-unused-expressions,no-sequences
      pos.name = this.stu.name,
      pos.job = this.stu.job,
      pos.school = this.stu.school,
      pos.sex = this.stu.sex,
      this.show = false
    }
  }
}
</script>

<style scoped>
  .myClass {
    background: hotpink;
  }
  .yourClass {
    background: cyan;
  }
</style>
